<template>
  <div>
    <div v-if="loading">
      {{$route.meta.title}}
      <van-field v-model="userInfo.username" label="用户名" />
      <van-row>
        上传
        <van-uploader multiple v-model="fileList" :after-read="afterRead" />
      </van-row>
      <van-button type="default" @click="changeUsername">确认修改</van-button>
      {{$route.params.id}}
    </div>
    <van-skeleton v-else :row="3" />
  </div>
</template>

<script>
export default {
  name: "modify",
  data() {
    return {
      userInfo: {
        //用户信息
      },
      fileList: [
        //图片数组
      ],
      loading: false,
      imgList: []
    };
  },
  methods: {
    async getUserInfo() {
      const { data: res } = await this.$axios.get("v1/user", {
        params: { user_id: this.$route.params.id }
      });
      this.userInfo = res;
    },
    async changeUsername() {
      this.$store.commit("setUser", this.userInfo);
      const { data: res } = await this.$axios.put("user", {
        username: this.userInfo.username,
        img: this.fileList
      });
      window.console.log(res);
    },
    afterRead(file) {
      file;
      // 此时可以自行将文件上传至服务器
      // if (file.length == 2) {
      //   //说明多数组上传
      //   file.forEach(e => {
      //     this.imgList.push(e.c);
      //   });
      // } else {
      //   this.imgList.push(file.file);
      // }
    }
  },
  created() {
    this.getUserInfo();
  },
  mounted() {
    setTimeout(() => {
      this.loading = true;
    }, 1000);
  }
};
</script>

<style lang="stylus" scoped></style>